<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input v-model="queryId" @keyup.enter.native="loadPostId" placeholder="请输入活动id" suffix-icon="el-icon-search"
        style="width: 190px; margin-left: 5px"></el-input>
      <!--      查询按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="loadPostId">id查询</el-button>
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
      <!--      新增按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="add">新增</el-button>

      <el-button type="primary" style="margin-left: 5px" @click="addAi">AI创建</el-button>
    </div>
    <el-table :data="records" :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }">
      <el-table-column prop="id" label="id" width="160"> </el-table-column>
      <el-table-column prop="subject" label="活动标题" width="140">
      </el-table-column>
      <el-table-column type="textarea" prop="activityType" label="活动类型" width="140"> </el-table-column>
      <el-table-column type="textarea" prop="rules" label="活动规则" width="140"> </el-table-column>
      <el-table-column type="textarea" prop="participantRequirements" label="参赛要求" width="140"> </el-table-column>
      <el-table-column type="textarea" prop="evaluationCriteria" label="评分标准" width="140"> </el-table-column>
      <el-table-column type="textarea" prop="awardSettings" label="奖项设置" width="140"> </el-table-column>
      <el-table-column type="textarea" prop="alimit" label="人数限制" width="100"> </el-table-column>
      <el-table-column prop="address" label="活动地址" width="200">
      </el-table-column>
      <el-table-column prop="activityStart" label="活动开始时间" width="140">
      </el-table-column>
      <el-table-column prop="activityEnd" label="活动结束时间" width="140">
      </el-table-column>
      <el-table-column prop="joinStart" label="报名开始时间" width="140">
      </el-table-column>
      <el-table-column prop="joinEnd" label="报名结束时间" width="140">
      </el-table-column>
      <!-- <el-table-column prop="status" label="状态" width="100">
      </el-table-column> -->
     
      <el-table-column prop="status" label="通过状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="getTagType(scope.row.status)" disable-transitions>{{
            getStatusLabel(scope.row.status)
          }}</el-tag>
        </template>
      </el-table-column>

     
      <el-table-column prop="operate" width="200" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
            title="这是一段内容确定删除吗？" @confirm="del(scope.row.id)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
          <el-button size="small" type="success" @click="exportAll(scope.row.id)" style="margin-left: 5px;"><a :href='exportUrl'>导出</a></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页  -->
    <pagination style="text-align: right;" v-show="total > 0" :pageSizes="[5, 10, 20, 30]" :total="total" :page.sync="page"
            :limit.sync="limit" @pagination="getList" />    

    <el-dialog title="活动管理信息" :visible.sync="centerDialogVisible" width="40%" center :before-close="handleClose">
      <el-form ref="form"  :model="form" label-width="80px">
        <el-form-item label="活动标题" prop="subject">
          <el-col :span="15">
            <el-input v-model="form.subject"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-col :span="15">
            <el-input v-model="form.address"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="人数限制" prop="alimit">
          <el-col :span="15">
            <el-input-number v-model="form.alimit" @change="handleChange" :min="1"></el-input-number>
            <!-- <el-input v-model="form.alimit"></el-input> -->
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="活动状态" prop="statusName">
          <el-col :span="15">
            <el-input v-model="form.statusName"></el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item label="报名状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="0">未开始</el-radio>
            <el-radio :label="1">报名中</el-radio>
            <el-radio :label="2">进行中</el-radio>
            <el-radio :label="3">已结束</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="活动类型" prop="activityType">
          <el-col :span="15">
            <el-input v-model="form.activityType"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动规则" prop="rules">
          <el-col :span="15">
            <el-input type="textarea" v-model="form.rules"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="参赛要求" prop="participantRequirements">
          <el-col :span="15">
            <el-input type="textarea" v-model="form.participantRequirements"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="评分标准" prop="evaluationCriteria">
          <el-col :span="15">
            <el-input type="textarea" v-model="form.evaluationCriteria"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="奖项设置" prop="awardSettings">
          <el-col :span="15">
            <el-input type="textarea" v-model="form.awardSettings"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择开始日期和时间" v-model="form.activityStart"
              style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="width: 10px;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择结束日期和时间" v-model="form.activityEnd"
              style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动报名时间" >
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择开始日期和时间" v-model="form.joinStart"
              style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="width: 10px;">-</el-col>
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="选择结束日期和时间" v-model="form.joinEnd"
              style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
       
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { queryAll } from '@/api/cmsService/actionManagement/queryAll';
import { del } from '@/api/cmsService/actionManagement/deleteAction';
import { addOrUpdateAction } from '@/api/cmsService/actionManagement/addOrUpdateAction';
import { serchAction } from '@/api/cmsService/actionManagement/searchAction';
import { UpdateAction } from '@/api/cmsService/actionManagement/UpdateAction';
// import {exportAction}from '@/api/cmsService/actionManagement/exportAction';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "actionManagement",
  data() {
    return {
      page: 1,
      limit: 5,
      centerDialogVisible: false,
      updateDialogVisible: false,
      exportActionVisible : false,
      total: 0,
      queryId: '',
      num: 1,
      records: [],
      form: {
        id: "",
        statusName: "",
        subject: "",
        address: "",
        activityType: "",
        rules: "",
        participantRequirements: "",
        evaluationCriteria: "",
        awardSettings: "",
        activityStart: "",
        activityEnd: "",
        joinStart: "",
        joinEnd: "",
        status: 0,
        alimit: 0,
        clubId: "",
      },
      status: "",
      exportUrl:"http://43.138.222.49:8002/joinservice/join-activity/export/",//导出地址
    }
  },
  methods: {
    
    //重置表单
    resetForm() {
      this.$refs.form.resetFields();
      this.form = {
        id: "",
        statusName: "",
        subject: "",
        address: "",
        activityType: "",
        rules: "",
        participantRequirements: "",
        evaluationCriteria: "",
        awardSettings: "",
        activityStart: "",
        activityEnd: "",
        joinStart: "",
        joinEnd: "",
        status: 0,
        alimit: 0,
        clubId: "",
      }
    },

    //新增按钮
    add() {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    addAi(){
      this.$router.push("/aiService")
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    resetParam() {
      this.queryId = '',
        this.loadPost();
    },
    mod(row) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        this.id = row.id;
        this.form.id = row.id
        this.form.subject = row.subject
        this.form.address = row.address
        this.form.activityType  = row.activityType
        this.form.rules  = row.rules
        this.form.participantRequirements  = row.participantRequirements
        this.form.evaluationCriteria  = row.evaluationCriteria
        this.form.awardSettings  = row.awardSettings
        this.form.status = row.status
        this.form.activityStart = row.activityStart
        this.form.activityEnd = row.activityEnd
        this.form.joinStart = row.joinStart
        this.form.joinEnd = row.joinEnd
        this.form.clubId = row.clubId
      });
    },
    //修改
    doMod() {
      this.form.activityStart = moment(this.form.activityStart).format('YYYY-MM-DD HH:mm:ss');
    this.form.activityEnd = moment(this.form.activityEnd).format('YYYY-MM-DD HH:mm:ss');
    this.form.joinStart = moment(this.form.joinStart).format('YYYY-MM-DD HH:mm:ss');
    this.form.joinEnd = moment(this.form.joinEnd).format('YYYY-MM-DD HH:mm:ss');
      UpdateAction(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
    //删除
    del(id) {
      del(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //提交数据到后台
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.id) {
            //如果有id则修改
            this.doMod();
          } else {
            //否则增加
            this.doSave();
          }
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
          return false;
        }
      });
    },
    loadPostId() {
      serchAction(this.queryId).then((res) => {
        this.records = [res.data.activity];
      });
    },
    loadPost() {
      queryAll(this.page, this.limit).then((res) => {
        if (res.code === 20000) {
        
          this.records = res.data.list.records;
          this.total = res.data.list.total;
        } else {
          console.log(res);

        }
      })
    },
    getList(e) {
            this.page = e.page
            this.limit = e.limit
            this.loadPost()
        },
    doSave() {
    this.form.activityStart = moment(this.form.activityStart).format('YYYY-MM-DD HH:mm:ss');
    this.form.activityEnd = moment(this.form.activityEnd).format('YYYY-MM-DD HH:mm:ss');
    this.form.joinStart = moment(this.form.joinStart).format('YYYY-MM-DD HH:mm:ss');
    this.form.joinEnd = moment(this.form.joinEnd).format('YYYY-MM-DD HH:mm:ss');
      addOrUpdateAction(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "增加成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "增加失败",
            type: "error",
          });
          console.log(res);

        }
      });
    },
     //通过状态的标签
     getTagType(status) {
      switch (status) {
        case 0:
          return "warning"; // 未开始，通常使用黄色
        case 1:
          return "success"; // 报名中，通常使用绿色
        case 2:
          return "danger"; //  进行中，通常使用红色
        default:
          return "danger"; // 默认情况，使用蓝色（改为红色）
      }
    },
    getStatusLabel(status) {
      switch (status) {
        case 0:
          return "未开始";
        case 1:
          return "报名中";
        case 2:
          return "进行中";
        default:
          return "已结束";
      }
    },
    exportAll(id) {
      this.exportUrl = 'http://43.138.222.49:8002/joinservice/join-activity/export/'
      this.exportUrl += id
      console.log(this.exportUrl);

    },

  },
  beforeMount() {
    this.loadPost();
  }
}
</script>

<style>
a{
  color: #fff;
  text-decoration: none;
}
.el-form-item__label {
  width: 100px !important;
}
</style>